<template>
  <div class="page-container">
    <!--表格内容栏-->
    <ac-table ref="dataTable"
      pkName="id" 
      :filters="filters" 
      :filterFields="filterFields"
      :columns="columns"
      @handleTableOperator="handleTableOperator" 
      @handleCellOperator="handleCellOperator"
    >
    </ac-table>
    <!--新增/编辑/查看界面-->
    <div class="edit-dialog">
      <el-dialog 
        width="800px"
        :append-to-body="true" 
        :title="dialogTitle" 
        v-model="dialogVisible"
        :close-on-click-modal="false"
        destroy-on-close
        draggable
      >
        <el-form
          ref="dataForm" 
          label-width="120px" 
          label-position="right"
          :model="formData" 
          :disabled="!dialogEdit"
          :rules="rules" 
          :hide-required-asterisk="!dialogEdit"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户ID" prop="userId">
                <el-input v-model="formData.userId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户编号" prop="code">
                <el-input v-model="formData.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作时间" prop="opTime">
                <el-input v-model="formData.opTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="url" prop="url">
                <el-input v-model="formData.url"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参数" prop="params">
                <el-input v-model="formData.params"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="耗时" prop="takeTime">
                <el-input v-model="formData.takeTime"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                <ac-datetime v-model="formData.createTime" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button 
            v-if="dialogEdit"
            size="default"
            type="info"
            @click="dialogVisible=false"
          >取消</el-button>
          <el-button 
            v-if="dialogEdit"
            size="default"
            type="primary"
            @click="submitForm"
            :loading="editLoading"
          >提交</el-button>
          <el-button 
            v-if="!dialogEdit"
            size="default"
            type="info"
            @click="dialogVisible=false"
          >关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import tool from "@/utils/tool";

const filters = ref({
  name: '',
  code: ''
});
const filterFields = ref([
  {prop: "name", label: "操作人员"},
]);
const columns = ref([
  {prop: "name", label: "操作人员", width: 220, formatter: (prop, value, row) => {
      return value + (row.orgName ? ('（' + row.orgName + '）') : '');
    }
  },
  {prop: "opTime", label: "操作时间", width: 160, type: "datetime"},
  {prop: "url", label: "操作地址", minWidth: 250},
  {prop: "params", label: "参数", minWidth: 250},
  {prop: "takeTime", label: "耗时", width: 120, formatter: (prop, value) => tool.formatTime(value)}
]);

const dialogTitle = ref('');
const dialogVisible = ref(false);
const dialogEdit = ref(true);
const editLoading = ref(false);
const rules = ref({
  userId: [{required: true, message: '请输入用户ID', trigger: 'blur'}],
    code: [{required: true, message: '请输入用户编号', trigger: 'blur'}],
    name: [{required: true, message: '请输入用户姓名', trigger: 'blur'}],
    opTime: [{required: true, message: '请输入操作时间', trigger: 'blur'}],
    url: [{required: true, message: '请输入url', trigger: 'blur'}],
    params: [{required: true, message: '请输入参数', trigger: 'blur'}],
    takeTime: [{required: true, message: '请输入耗时', trigger: 'blur'}],
    createTime: [{required: true, message: '请输入创建时间', trigger: 'blur'}]
});
const formData = ref({});
const dataForm = ref();

const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const handleTableOperator = (button, row) => {
  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.name;
  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else {
    formData.value = {button: button};
  }

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};
</script>